<div id="project_type_set">
    <div class="project_type_set">
        <el-row class="table_search">
            <el-col :span="12">
                <template>
                    <el-input
                            placeholder="请输入项目类型名进行搜索"
                            style="width: 220px;"
                            clearable
                            v-model="parameters.searchContent">
                    </el-input>
                    <el-button type="primary"  @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
            <el-col :span="12" class="btnTypeSet" style="text-align: right">
                <el-button type="primary"
                           icon="el-icon-plus"
                           @click="openAddProjectType">新增类型</el-button>
            </el-col>
        </el-row>
        <!--表格-->
        <el-table
                size="mini"
                :data="tableData"
                align="center"
                style="width: 100%;text-align: center;">
            <el-table-column
                    align="center"
                    width="240"
                    prop="projectTypeName"
                    label="项目类型名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="240"
                    prop="status"
                    :formatter="getProjectStatus"
                    label="项目类型状态">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="240"
                    prop="projectTypeNo"
                    :formatter="getProjectTypeNo"
                    label="项目类型分类">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            class="btn"
                            @click="amendProjectType(scope.$index,scope.row)">修改</el-button>
                    <el-button
                            size="mini"
                            type="text"
                            class="btn-Del"
                            @click="deleteRow(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="footerBox">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="totalCount">
            </el-pagination>
        </div>

        <!--新增弹出框-->
        <el-dialog title="添加项目类型" :visible.sync="dialogAddProjectTypeVisible" :before-close="emptyContent">
            <el-form
                    class="add-template-form"
                    :rules="rules"
                    ref="addProjectTypeForm"
                    :model="addProjectTypeForm"
                    label-width="150px"
                    :label-position="labelPosition">
                <el-form-item label="项目类型名称：" prop="projectTypeName">
                    <el-input v-model="addProjectTypeForm.projectTypeName" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="项目类型分类：" prop="projectTypeNo">
                <el-select v-model="addProjectTypeForm.projectTypeNo" placeholder="请选择分类"  style="width: 60%;">
                    <el-option label="请选择分类" value=""></el-option>
                    <el-option label="党费" value="01"></el-option>
                    <el-option label="其他" value="99"></el-option>
                </el-select>
            </el-form-item>
            </el-form>
            <!--底部按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="addCaleForm('addProjectTypeForm')">取 消</el-button>
                <el-button type="primary" @click="goConfirm('addProjectTypeForm')">确 定</el-button>
            </div>
        </el-dialog>
        <!--修改弹出框-->
        <el-dialog title="修改项目类型" :visible.sync="dialogAmendProjectTypeVisible" :before-close="emptyContent">
            <el-form
                    class="add-template-form"
                    :rules="rules"
                    ref="amendProjectTypeForm"
                    :model="amendProjectTypeForm"
                    label-width="150px"
                    :label-position="labelPosition">
                <el-form-item label="项目类型名称：" prop="projectTypeName">
                    <el-input v-model="amendProjectTypeForm.projectTypeName" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="项目类型分类：" prop="projectTypeNo">
                    <el-select v-model="amendProjectTypeForm.projectTypeNo" placeholder="请选择分类"  style="width: 60%;">
                        <el-option label="请选择分类" value=""></el-option>
                        <el-option label="党费" value="01"></el-option>
                        <el-option label="其他" value="99"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!--底部按钮-->
            <div slot="footer" class="dialog-footer">
                <el-button @click="amendCaleForm('amendProjectTypeForm')">取 消</el-button>
                <el-button type="primary" @click="goConfirm('amendProjectTypeForm')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</div>
<!--[if IE]>
<script>
    goIEPage(IEVersion(),'${basePath}/projectTypeIE9');
</script>
<![endif]-->
<script>

    var project_type_set =
        new Vue({
            el: "#project_type_set",
            data: {
                labelPosition:'left',
                tableData: [],// 表格信息
                // 分页
                currentPage: 1,
                totalCount:'',
                totalPage:'',
                parameters:{
                    'currentPage':'',
                    'searchContent':''
                },
                // 添加、修改
                addProjectTypeForm:{
                    projectTypeName:'',
                    projectTypeNo:''
                },
                amendProjectTypeForm:{
                    projectTypeName:'',
                    projectTypeNo:''
                },
                dialogAddProjectTypeVisible:false,
                dialogAmendProjectTypeVisible:false,
                rules: {
                    projectTypeName: [
                        { required: true, message: '请输入项目类型名称', trigger: 'blur' },
                        {  max: 15, message: '长度在15个字符以内', trigger: 'blur' }
                    ],
                    projectTypeNo: [
                        { required: true, message: '请选择项目类型分类', trigger: 'blur' }
                    ]
                },
            },
            methods: {
                // 关闭前清空内容before-close
                emptyContent:function(){
                    if(project_type_set.dialogAddProjectTypeVisible){
                        project_type_set.dialogAddProjectTypeVisible = false;
                        project_type_set.$refs.addProjectTypeForm.resetFields();
                    }else if(project_type_set.dialogAmendProjectTypeVisible){
                        project_type_set.dialogAmendProjectTypeVisible = false;
                        project_type_set.$refs.amendProjectTypeForm.resetFields();
                    }

                },
                // 分页加载数据
                handleCurrentChange: function(currentPage){
                    Pagesearch(this,'${basePath}merchant/mProjectType/getProjectTypeList1', this.parameters,currentPage,
                        function (resData) {
                            if(resData.status == 'success') {

                            }
                        });
                },
                // 状态转换
                getProjectStatus:function (row) {
                    if(row.status == '1'){
                        return '正常';
                    } else if(row.status == '0'){
                        return '禁用';
                    } else {
                        return '';
                    }
                },
                getProjectTypeNo:function (row){
                    if(row.projectTypeNo == '01'){
                        return '党费';
                    } else if(row.projectTypeNo == '99'){
                        return '其他';
                    } else {
                        return '';
                    }
                },
                // 删除
                deleteRow: function(index, rows) {
                    stopMaoPao();
                    var that = this;
                    that.$confirm('确认删除该项目类型吗？','提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        var options ={"projectTypeId":rows.projectTypeId};
                        sendService('${basePath}/merchant/mProjectType/deleteMProjectType',options,function (resData) {
                            if(resData.status == 'success') {

                                if(resData.msg.indexOf('该收费项目类型正在使用不能删除')> -1) {
                                    project_type_set.$message({
                                        type: 'warning',
                                        message: resData.msg
                                    })
                                }

                                if(resData.msg.indexOf('删除成功')>-1) {
                                    project_type_set.$message({
                                        type: 'success',
                                        message: resData.msg
                                    });
                                    reloadPage('${basePath}merchant/mProjectType/getProjectTypeList');
                                }

                                if(resData.msg.indexOf('删除失败')>-1) {
                                    project_type_set.$message({
                                        type: 'info',
                                        message: '删除失败！'
                                    })
                                }
                            }
                        });
                    }).catch(function () {
                        that.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    })
                },

                // 搜索
                searchFun: function(){
                    if(this.parameters.searchContent == '') {
                        reloadPage('${basePath}merchant/mProjectType/getProjectTypeList');
                    }else {
                        Pagesearch(this, '${basePath}merchant/mProjectType/getProjectTypeList1', this.parameters, 1,
                            function (resData) {
                                if (resData.status == 'success') {

                                }
                            });
                    }
                },

                // 打开添加的弹窗
                openAddProjectType:function () {
                    project_type_set.dialogAddProjectTypeVisible = true;
                },
                // 关闭添加的弹窗
                addCaleForm: function (formName) {
                    project_type_set.dialogAddProjectTypeVisible = false;
                    project_type_set.$refs[formName].resetFields();
                },
                // 打开修改的弹窗
                amendProjectType:function (index,row) {
                    stopMaoPao();
                    project_type_set.dialogAmendProjectTypeVisible = true;
                    project_type_set.amendProjectTypeForm = row;
                },
                // 关闭修改的弹窗
                amendCaleForm: function (formName) {
                    project_type_set.dialogAmendProjectTypeVisible = false;
                    project_type_set.$refs[formName].resetFields();
                },
                // 添加、修改提交功能
                goConfirm: function (formName) {
                    project_type_set.$refs[formName].validate(
                        function(valid) {
                            if (valid) {
                                if(formName === 'addProjectTypeForm'){
                                    var options = {
                                        'projectTypeName' : project_type_set.addProjectTypeForm.projectTypeName,
                                        'projectTypeNo' : project_type_set.addProjectTypeForm.projectTypeNo
                                    };
                                    console.log(options);
                                    sendService('${basePath}/merchant/mProjectType/saveOrUpdateMProjectType',options,function (resData) {
                                        if(resData.status == 'success'){
                                            if(resData.msg.indexOf('添加成功')> -1) {
                                                project_type_set.$message({
                                                    type: 'success',
                                                    message: resData.msg
                                                });
                                                // 保存成功后关闭弹窗
                                                project_type_set.dialogAddProjectTypeVisible = false;
                                                // 刷新页面
                                                reloadPage('${basePath}merchant/mProjectType/getProjectTypeList');
                                            }
                                            if(resData.msg.indexOf('项目类型已经存在')>-1) {
                                                project_type_set.$refs[formName].resetFields();
                                                project_type_set.$message({
                                                    type: 'warning',
                                                    message: resData.msg
                                                });
                                            }
                                        }
                                    })
                                }else if(formName === 'amendProjectTypeForm'){
                                    var options = {
                                        "projectTypeId":project_type_set.amendProjectTypeForm.projectTypeId,
                                        "projectTypeName": project_type_set.amendProjectTypeForm.projectTypeName,
                                        "projectTypeNo" : project_type_set.amendProjectTypeForm.projectTypeNo
                                    };
                                    sendService('${basePath}/merchant/mProjectType/saveOrUpdateMProjectType',options,
                                        function (resData) {
                                            if(resData.status == 'success'){
                                                if(resData.msg.indexOf('修改成功')> -1) {
                                                    project_type_set.$message({
                                                        type: 'success',
                                                        message: resData.msg
                                                    });
                                                    // 保存成功后关闭弹窗
                                                    project_type_set.dialogAmendProjectTypeVisible = false;
                                                    // 刷新页面
                                                    reloadPage('${basePath}merchant/mProjectType/getProjectTypeList');
                                                }
                                            }
                                            if(resData.msg.indexOf('项目类型已经存在')>-1) {
                                                project_type_set.$refs[formName].resetFields();
                                                project_type_set.$message({
                                                    type: 'warning',
                                                    message: resData.msg
                                                });
                                            }
                                        });
                                }
                            } else {
                                return false;
                            }
                        });
                },
            },
            created: function () {
                // 从后台获取请求数据的URL
                Pagesearch(this,'${basePath}merchant/mProjectType/getProjectTypeList1', null,1,function (resData) {
                    if(resData.status == 'success'){
                        // 成功后的callback

                    }
                });
            }
        });
</script>

<style scoped>
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }


    .project_type_set .searchBox{
        height: 60px;
        line-height: 60px;
        padding-left: 30px;
        margin-bottom: 10px;
        background: #fff;
    }
    .project_type_set .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
        text-align: right;
    }
    .project_type_set .footerBox{
        width: 100%;
        height: 50px;
        text-align: right;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
    }

    .el-dialog__body{
        padding: 40px 0 40px 100px;
    }
    .el-dialog__header span {
        padding-left: 20px;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: #aaa;
        font-size: 22px;
    }
    .dialogDetails .el-dialog {
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }
    .el-dialog__header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__body {
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body {
        padding: 50px 0 0 0;
    }
    .dialogDetails .info-template-content .el-row:nth-child(even) {
        background-color: #efefef;
    }
    .dialogDetails .item-row {
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 100px;
    }
    .dialogDetails .item-row div:first-of-type {
        color: #aaa;
        text-align: left;
    }
    .dialogDetails .item-row div:last-of-type {
        color: #333;
        padding-left: 80px;
    }
    .dialogDetails .info-template-content .el-row:last-of-type {
        margin-bottom: 30px;
    }
</style>
